<template>
	<view class="container" :style="{ height: windowHeight + 'px' }">
		<u-navbar style="position: fixed;z-index: 10000;" :border-bottom="false" back-text="返回" :is-fixed="true" :background="{ backgroundColor: 'rgba(255,255,255,0)' }" title-color="#000"><!--  --></u-navbar>
		<image class="login-background-image" :src="`${staticFileDomain}/static/temp/login.jpg`" mode="aspectFill"></image>
		<view class="login-container" :style="{ height: windowHeight + 'px' }">
			<view class="login-container-title">
				<text>红 娘 登 录</text>
				<view class="login-container-title-decorate">
					<view class="login-container-title-decorate-line"></view>
					<view class="login-container-title-decorate-dot"></view>
					<view class="login-container-title-decorate-line"></view>
				</view>
			</view>
			<view class="login-container-input" style="margin-top: 100rpx;">
				<image class="login-container-input-icon" src="@/static/images/matchmaker/icon-login-account.png" mode="aspectFit"></image>
				<input type="number" placeholder-class="login-container-input-placeholder" class="login-container-input-area" placeholder="请输入手机号码" v-model="mobile" />
			</view>
			<view class="login-container-input" style="margin-top: 50rpx;">
				<image class="login-container-input-icon" src="@/static/images/matchmaker/icon-login-password.png" mode="aspectFit"></image>
				<input placeholder-class="login-container-input-placeholder" class="login-container-input-area" type="text" placeholder="请输入验证码" maxlength="6" v-model="verify" />
			</view>
			<view class="login-container-code">
				<text @tap.stop="getSmsCode" class="login-container-code-text">{{ sendTips }}</text>
			</view>
			<view class="login-container-btn" @tap.stop="handleLogin">登 录</view>
			<view class="login-container-auth" :class="{ hide: hideAuthLoginType }">
				<view class="login-container-auth-title">其他方式登录</view>
				<view class="login-container-auth-list">
					<view class="login-container-auth-item" v-if="loginType.wechatH5"><image class="login-container-auth-item-icon" src="@/static/images/auth/wechat.png" mode="aspectFit"></image></view>
					<view class="login-container-auth-item" v-if="loginType.wechatApp"><image class="login-container-auth-item-icon" src="@/static/images/auth/wechat.png" mode="aspectFit"></image></view>
					<view class="login-container-auth-item" v-if="loginType.wechatApp"><image class="login-container-auth-item-icon" src="@/static/images/auth/apple.png" mode="aspectFit"></image></view>
				</view>
			</view>
			<view class="login-container-tip">
				登录即代表同意
				<text @tap.stop="toAgreePage(0)" :data-index="0">用户协议</text>
				和
				<text @tap.stop="toAgreePage(4)" :data-index="4">隐私政策</text>
			</view>
		</view>
		<u-verification-code :keep-running="true" unique-key="smsLogin" :seconds="60" end-text="收不到验证码，重新发送" ref="sendCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import { updateUserToken, updateRefereeCode } from '@/store/dispatches.js';
import { initIMService } from '@/store/dispatches.js';
import AgreemenType from '@/utils/enum/AgreemenType.js';
export default {
	data() {
		return {
			windowHeight: null,
			sendTips: '',
			loginType: {
				wechatH5: false,
				wechatApp: false,
				wxapp: false
			},
			mobile: '',
			verify: '',
			agreemenType:AgreemenType
		};
	},
	computed: {
		hideAuthLoginType: function() {
			return true;
			// return !this.loginType.wechatH5 && !this.loginType.wechatApp && !this.loginType.wxapp;
		}
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
		// #ifdef H5
		this.$set(this.loginType, 'wechatH5', Tools.isWechat());
		// #endif
	},
	methods: {
		toAgreePage(index){
			this.navigateTo({
				url: this.$u.api.openAgreementPage(this.agreemenType[index].value)
			});
		},
		// 收不到验证码选择时的选择
		getSmsCode() {
			if (this.$refs.sendCode.canGetCode) {
				this.$u.api
					.sendSmsCode(this.mobile, 'login')
					.then(res => {
						// 通知验证码组件内部开始倒计时
						this.$refs.sendCode.start();
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
					})
					.catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.data.msg
						});
					});
			}
		},
		codeChange(text) {
			this.sendTips = text;
		},
		handleLogin() {
			this.$u.api
				.loginBySms(this.mobile, this.verify, '')
				.then(res => {
					updateRefereeCode('');
					updateUserToken(res.data.token);
					initIMService()
					this.refreshUserInfo();
					
				})
				.catch(e => {
					if (e.statusCode == 200) {
						uni.showToast({
							icon: 'none',
							title: e.data.msg
						});
					}
				});
		},
		completeUserInfo() {
			this.reLaunch();
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	width: 750rpx;
	height: 100vh;
	background-color: #fff;
	.login-background-image {
		width: 750rpx;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		transform: scale(1.3);
		filter: blur(20px);
		opacity: 0.7;
		z-index: 0;
	}
	.login-container {
		width: 750rpx;
		z-index: 1;
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;

		.login-container-title {
			height: 104rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			width: 271rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			text {
				white-space: 12rpx;
				color: rgba(255, 255, 255, 1);
				font-size: 36rpx;
			}
			.login-container-title-decorate {
				position: absolute;
				bottom: 14rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.login-container-title-decorate-line {
					width: 63rpx;
					height: 3rpx;
					background: rgba(255, 255, 255, 1);
					border-radius: 2rpx;
				}
				.login-container-title-decorate-dot {
					width: 4rpx;
					height: 4rpx;
					background: rgba(255, 255, 255, 1);
					margin: 0 21rpx;
				}
			}
		}

		.login-container-input {
			width: 454rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #fff;
			.login-container-input-icon {
				width: 36rpx;
				height: 36rpx;
				flex-shrink: 0;
				margin-right: 30rpx;
			}
			.login-container-input-area {
				height: 70rpx;
				width: 454rpx;
				color: #fff;
				font-size: 32rpx;
				box-sizing: border-box;
				flex: 1;
				flex: 1;
			}
			.login-container-input-placeholder {
				color: #fff;
				font-size: 28rpx;
			}
		}
		.login-container-code {
			height: 33rpx;
			width: 454rpx;
			margin-top: 30rpx;
			text-align: right;
			.login-container-code-text {
				height: 33rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #fff;
				line-height: 33rpx;
				letter-spacing: 1rpx;
			}
		}
		.login-container-btn {
			width: 400rpx;
			height: 80rpx;
			background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #fff;
			margin-top: 81rpx;
			margin-bottom: 60rpx;
		}
		.login-container-auth {
			min-height: 200rpx;
			margin-top: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			&.hide {
				opacity: 0;
			}
			.login-container-auth-title {
				height: 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				line-height: 28rpx;
				letter-spacing: 4rpx;
				text-indent: 4rpx;
			}
			.login-container-auth-list {
				margin-top: 35rpx;
				height: 96rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.login-container-auth-item {
					height: 96rpx;
					padding: 0 20rpx;
					position: relative;
					.login-container-auth-item-icon {
						height: 96rpx;
						width: 96rpx;
					}
					&::after {
						content: '';
						width: 2rpx;
						height: 40rpx;
						background: rgba(255, 255, 255, 1);
						border-radius: 4rpx;
						position: absolute;
						display: block;
						right: 0;
						top: 50%;
						margin-top: -20rpx;
					}
					&:nth-last-child(1) {
						&::after {
							display: none;
						}
					}
				}
			}
		}
		.login-container-tip {
			height: 45rpx;
			margin-bottom: calc(30rpx var(--safe-area-inset-bottom));
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 14rpx;
			letter-spacing: 1rpx;
			text-indent: 1rpx;
			margin-top: 30rpx;
			text {
				padding: 0 6rpx;
				color: rgba(255, 77, 126, 1);
			}
		}
	}
}
</style>
